<!--
 * @Descripttion: 
 * @Author: jhw
 * @Date: 2024-06-20 11:25:51
 * @LastEditors: jhw
 * @LastEditTime: 2024-06-25 10:56:40
-->
<template>
  <div>
    <!-- 搜索表单 -->
    <JSearchForm v-model="queryForm" :list="configList" :dict="dict" @query="handleQuery" @reset="handleReset">
      <el-tree-select v-model="queryForm.treeSelect" :data="data" :render-after-expand="false" style="width: 220px" />
    </JSearchForm>
  </div>
</template>

<script setup lang="ts">
import { IListPropsType } from '@/components/JSearchForm/config';
import JSearchForm from '@/components/JSearchForm/index.vue';
import { removeEmpty } from '@/utils/common';
import { ref } from 'vue';

const data = [
  {
    value: '1',
    label: 'Level one 1',
    children: [
      {
        value: '1-1',
        label: 'Level two 1-1',
        children: [
          {
            value: '1-1-1',
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    value: '2',
    label: 'Level one 2',
    children: [
      {
        value: '2-1',
        label: 'Level two 2-1',
        children: [
          {
            value: '2-1-1',
            label: 'Level three 2-1-1',
          },
        ],
      },
      {
        value: '2-2',
        label: 'Level two 2-2',
        children: [
          {
            value: '2-2-1',
            label: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
  {
    value: '3',
    label: 'Level one 3',
    children: [
      {
        value: '3-1',
        label: 'Level two 3-1',
        children: [
          {
            value: '3-1-1',
            label: 'Level three 3-1-1',
          },
        ],
      },
      {
        value: '3-2',
        label: 'Level two 3-2',
        children: [
          {
            value: '3-2-1',
            label: 'Level three 3-2-1',
          },
        ],
      },
    ],
  },
];

interface IQueryForm {
  name: string;
  age: string;
  sex: string;
  datepicker: string;
  select2: string;
  timepicker: string;
  treeSelect: string;
}

const configList = ref<IListPropsType<IQueryForm>>([
  {
    label: '姓名',
    prop: 'name',
    searchType: 'input',
  },
  {
    label: '年龄',
    prop: 'age',
    searchType: 'input',
  },
  {
    label: '性别',
    prop: 'sex',
    searchType: 'select',
    options: [
      {
        label: '男',
        value: '1',
      },
      {
        label: '女',
        value: '2',
      },
    ],
  },
  {
    label: '生日',
    prop: 'datepicker',
    searchType: 'datepicker',
    valueFormat: 'YYYY-MM-DD',
  },
  {
    label: '测试select2',
    prop: 'select2',
    searchType: 'select2',
    options: [
      {
        label: '选项1',
        value: '1',
      },
      {
        label: '选项2',
        value: '2',
      },
    ],
    otherProps: {},
  },
  {
    label: '测试timepicker',
    prop: 'timepicker',
    searchType: 'timepicker',
  },
  {
    label: '测试treeselect',
    prop: 'treeSelect',
    searchType: 'treeselect',
  },
]);

const queryForm = ref<IQueryForm>({
  name: '',
  age: '',
  sex: '',
  datepicker: '',
  select2: '',
  timepicker: '',
  treeSelect: '',
});

const dict = {};
// 搜索
const handleQuery = () => {
  const opt = removeEmpty({ ...queryForm.value });
  console.log('opt', opt);
};

const handleReset = () => {
  (Object.keys(queryForm.value) as (keyof IQueryForm)[]).forEach((field) => {
    queryForm.value[field] = '';
  });
  handleQuery();
};
</script>

<style scoped></style>
